<template>
  <div class="hello">
    <div id="abc" style="height: 500px;width: auto">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'HelloWorld',
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('abc');
      let option = {
        // title: {
        //   text: '雷电地闪次数/万次',
        //   x: 'left',
        //   y: 'center',
        //   textAlign: 'left',
        //   textVerticalAlign: "center",
        // },
        color: ['blue'],
        xAxis: {
          type: 'category',
          data: ['6/15', '6/22', '6/29', '7/6', '7/13', '7/20'],
          name: '雷电地闪次数/万次',
          nameLocation:'center',
          nameGap:58,
          nameTextStyle:{fontSize:14},
          axisLabel: { //X轴字体倾斜设置
            interval: 0,
            rotate: -300 //倾斜的程度
          }
        },
        yAxis: {
          type: 'value',
          name: '雷电地闪次数/万次',
          nameRotate: -270,
          nameLocation:'center',
          nameGap:80,
          nameTextStyle:{fontSize:14},
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          },
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
          , {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      };
      this.$nextTick(() => {
        let myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
      })
    }
  }
}
</script>
